<template>
	<view class="left-border" @tap="playRadio">
		<view v-if="!radioPlay" class="radio-border-pause"><view class="pause"/></view>
		<view v-if="radioPlay" class="radio-border-play"><view class="play"/></view>
	</view>
</template>

<script>
	export default{
		props:{
			val:Object
		},
		data(){
			return{
				radioPlay: false,
				innerAudioContext:""
			}
		},
		created() {
			this.innerAudioContext = uni.createInnerAudioContext()
		},
		methods:{
			playRadio(){
				this.radioPlay = !this.radioPlay
				if(this.radioPlay){
					this.innerAudioContext.src = this.val.src;
					this.innerAudioContext.play()
					this.innerAudioContext.onEnded(() => {
					   this.innerAudioContext.stop()
					   this.radioPlay = false
					})
				}else{
					this.innerAudioContext.stop()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.left-border{
		width: 250rpx;
		height: 220rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e2e2e2;
		transition: 0.5s;
		@keyframes fadeIn{
			0%{opacity: 0;}
			100%{opacity: 0.8;}
		}
		.radio-border-pause{
			width: 150rpx;
			height: 150rpx;
			background-color: transparent;
			border: 5rpx solid #67C23A;
			border-radius: 50%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: 0.3s fadeIn;
			opacity: 0.8;
			.pause{
				width: 80rpx;
				height: 80rpx;
				background-color: #67C23A;
				border-radius: 50%;
			}
		}
		.radio-border-play{
			width: 150rpx;
			height: 150rpx;
			background-color: transparent;
			border: 5rpx solid #d4237a;
			border-radius: 50%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: 0.3s fadeIn;
			opacity: 0.8;
			.play{
				height: 80rpx;
				width: 10rpx;
				background-color: #d4237a;
				border-radius: 50rpx;
				position: relative;
				right: 18rpx;
			}
			.play::after{
				content: '';
				height: 80rpx;
				width: 10rpx;
				background-color: #d4237a;
				border-radius: 50rpx;
				position: absolute;
				left: 400%;
			}
		}
		
	}
</style>
